<template>
    <div>
      <div id="head">
        <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                  style="position: absolute;left: 10px;" />
        能耗分析
      </div>
      <div @click="displayPage()" style="width: 100%;height: 30px;background-color: #1989fa;text-align: left;padding-left: 10px;
                                         padding-top: 5px;font-size: 14px;color: white;margin-bottom: 2px">
        <van-icon id="van" size="20px" name="arrow" style="position: absolute;right: 10px;" />
        用能概述
      </div>
      <div @click="toRegional()" style="width: 100%;height: 30px;background-color: #1989fa;text-align: left;padding-left: 10px;
                                         padding-top: 5px;font-size: 14px;color: white;margin-bottom: 2px">
        <van-icon id="van" size="20px" name="arrow" style="position: absolute;right: 10px;" />
        区域分析
      </div>
      <div @click="toSubitem" style="width: 100%;height: 30px;background-color: #1989fa;text-align: left;padding-left: 10px;
                                         padding-top: 5px;font-size: 14px;color: white;margin-bottom: 2px">
        <van-icon id="van" size="20px" name="arrow" style="position: absolute;right: 10px;" />
        分项分析
      </div>
    </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    toSubitem(){
      this.$router.push('/subitem')
    },
    toRegional(){
      this.$router.push('/regional')
    },
    displayPage(){
      this.$router.push('/analysis')
    },
    toHead() {
      this.$router.push('/medical')
    },
  }
}
</script>
<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0px;
}
</style>
